<script setup>
import { ElMessageBox } from 'element-plus';
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import QuestionItem from './QuestionItem.vue';
import Sort from './Sort.vue';
import useQuestionStore from '@/store/question';

const emit = defineEmits(['clickDelete', 'pageChange'])

const questionStore = useQuestionStore()
const { questionList, page, limit, total, loading } = storeToRefs(questionStore)

const onClickDelete = (questionId) => {
  ElMessageBox.alert('确认删除该提问吗？', {
    confirmButtonText: '确认',
    callback: (action) => {
      if (action === 'confirm') {
        emit('clickDelete', questionId)
      }
    }
  })
}
</script>

<template>
  <div class="question-container">
    <el-empty v-if="!questionList.length" description="还没有记录的问题" />

    <template v-else>
      <Sort :sortList="$attrs.sortList" @clickSort="$attrs.onClickSort" />

      <ul class="question-list">
        <el-alert
          class="alert"
          :title="`共${questionList.length}篇文章`"
          type="info"
          :closable="false"
        />
        <li v-for="(question) in questionList" :key="question.id">
          <QuestionItem :question="question" @clickDelete="onClickDelete" />
        </li>
      </ul>

      <el-pagination
        :current-page="page"
        @update:current-page="nowPage => $emit('pageChange', nowPage)"
        class="pagination"
        background
        layout="prev, pager, next"
        :page-size="limit"
        :total="total"
        :hide-on-single-page="true"
        :disabled="loading"
      />
    </template>
  </div>
</template>

<style lang="sass" scoped>

.question-container
  height: 100%
  position: relative
  overflow-y: auto
  .question-list
    width: 60vw
    max-width: 1200px
    background-color: white
    padding: 10px 0
    margin: 20px auto
    border-radius: 4px
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%)
  .alert
    margin-bottom: 10px
  .pagination
    margin: 20px auto
    width: fit-content
    position: sticky
    bottom: 20px
    padding: 20px
    background-color: white
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%)
</style>